﻿<template>
  <div class = 'show_content'>
    <template v-if = 'data.pageConfig.hadWorkflow && data.pageConfig.relatedWorkflow'>
      <!-- 上部展示按钮组 -->
      <div>
        <el-button type='primary' size = 'mini' v-if = 'workflowBtnStatus.Delete.length'><i class='iconfont icon-shanchu'></i>{{workflowBtnStatus.Delete[0].btnName ? workflowBtnStatus.Delete[0].btnName : '删除'}}</el-button>
        <el-button type='primary' size = 'mini' v-if = 'workflowBtnStatus.Save.length'><i class='iconfont icon-baocun'></i>{{workflowBtnStatus.Save[0].btnName ? workflowBtnStatus.Save[0].btnName : '保存'}}</el-button>
        <el-button type='primary' size = 'mini' v-if = 'workflowBtnStatus.Submit.length'><i class='iconfont icon-tijiao-'></i>{{workflowBtnStatus.Submit[0].btnName ? workflowBtnStatus.Submit[0].btnName : '提交'}}</el-button>
        <el-button type='primary' size = 'mini' v-if = 'workflowBtnStatus.Pass.length'><i class='iconfont icon-tongguo'></i>{{workflowBtnStatus.Pass[0].btnName ? workflowBtnStatus.Pass[0].btnName : '通过'}}</el-button>
        <el-button type='primary' size = 'mini' v-if = 'workflowBtnStatus.Apply.length'><i class='iconfont icon-daichulidingdan'></i>{{workflowBtnStatus.Apply[0].btnName ? workflowBtnStatus.Apply[0].btnName : '申请'}}</el-button>
        <el-button type='primary' size = 'mini' v-if = 'workflowBtnStatus.Reject.length'><i class='iconfont icon-shenpibohui'></i>{{workflowBtnStatus.Reject[0].btnName ? workflowBtnStatus.Reject[0].btnName : '驳回'}}</el-button>
        <el-button type='primary' size = 'mini' v-if = 'workflowBtnStatus.Stop.length'><i class='iconfont icon-zhongzhi'></i>{{workflowBtnStatus.Stop[0].btnName ? workflowBtnStatus.Stop[0].btnName : '终止'}}</el-button>
      </div>
      <el-tabs v-model = 'currentShow'>
        <el-tab-pane label = '基础信息' name = 'basicInfo'>
          <el-form ref="generateForm" :size="data.config.itemSize" :model="models" :rules="rules" :label-position="data.config.labelPosition"
          :label-width="data.config.labelWidth + 'px'" :inline="data.config.inline">
            <template v-for="item in data.list">
              <!-- 栅格布局时 -->
              <template v-if = "item.type == 'grid' && (Object.keys(item.options).indexOf('isHidden') === -1 || !item.options.isHidden)">
                <el-row :key="item.key" type="flex"
                  :gutter="item.options.gutter ? item.options.gutter : 0"
                  :justify="item.options.justify"
                  :align="item.options.align">
                  <el-col v-for = "(col, colIndex) in item.columns" :key = "colIndex" :span = "col.span"
                  :class = "(Object.keys(col).indexOf('isButtonGroup') !== -1 && col.isButtonGroup) ? 'el_col_buttonGroup' : ''">
                    <template v-for="citem in col.list" >
                      <Show-form-item :key="citem.key" :models.sync="models" :rules="rules" :widget="citem"></Show-form-item>
                    </template>
                  </el-col>
                </el-row>
              </template>
              <!-- tab标签页时 -->
              <template v-else-if = "item.type == 'tabs'  && (Object.keys(item.options).indexOf('isHidden') === -1 || !item.options.isHidden)">
                <el-tabs :key="item.key" :type = "item.options.tabType" :stretch = "item.options.stretch">
                  <el-tab-pane v-for="(tabItem, tabIndex) in item.tabList" :key="tabIndex" :label="tabItem.label">
                    <template v-for="el in tabItem.list">
                      <!-- 为栅格布局时 -->
                      <template v-if = "el.type == 'grid'  && (Object.keys(el.options).indexOf('isHidden') === -1 || !el.options.isHidden)">
                        <el-row :key="el.key" type="flex"
                        :gutter="el.options.gutter ? el.options.gutter : 0"
                        :justify="el.options.justify"
                        :align="el.options.align">
                          <el-col v-for = "(col, colIndex) in el.columns" :key = "colIndex" :span = "col.span"
                          :class = "(Object.keys(col).indexOf('isButtonGroup') !== -1 && col.isButtonGroup) ? 'el_col_buttonGroup' : ''">
                            <template v-for = "citem in col.list" >
                              <Show-form-item :key = "citem.key" :models.sync = "models" :rules = "rules" :widget = "citem"></Show-form-item>
                            </template>
                          </el-col>
                        </el-row>
                      </template>
                      <!-- 其它组件 -->
                      <template v-else>
                        <Show-form-item :key="el.key" :models.sync="models" :rules="rules" :widget="el"></Show-form-item>
                      </template>
                    </template>
                  </el-tab-pane>
                </el-tabs>
              </template>
              <template v-else>
                <Show-form-item :key="item.key" :models.sync="models" :rules="rules" :widget="item"></Show-form-item>
              </template>
            </template>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label = '流程信息' name = 'workflowInfo'>
          <workflow-show :WFID = 'data.pageConfig.relatedWorkflow' :isShow = 'currentShow'></workflow-show>
        </el-tab-pane>
      </el-tabs>
    </template>
    <el-form ref="generateForm" :size="data.config.itemSize" :model="models" :rules="rules" :label-position="data.config.labelPosition"
    :label-width="data.config.labelWidth + 'px'" :inline="data.config.inline" v-else>
      <template v-for="item in data.list">
        <!-- 栅格布局时 -->
        <template v-if = "item.type == 'grid' && (Object.keys(item.options).indexOf('isHidden') === -1 || !item.options.isHidden)">
          <el-row :key="item.key" type="flex"
            :gutter="item.options.gutter ? item.options.gutter : 0"
            :justify="item.options.justify"
            :align="item.options.align">
            <el-col v-for = "(col, colIndex) in item.columns" :key = "colIndex" :span = "col.span"
            :class = "(Object.keys(col).indexOf('isButtonGroup') !== -1 && col.isButtonGroup) ? 'el_col_buttonGroup' : ''">
              <template v-for="citem in col.list" >
                <Show-form-item :key="citem.key" :models.sync="models" :rules="rules" :widget="citem"></Show-form-item>
              </template>
            </el-col>
          </el-row>
        </template>
        <!-- tab标签页时 -->
        <template v-else-if = "item.type == 'tabs'  && (Object.keys(item.options).indexOf('isHidden') === -1 || !item.options.isHidden)">
          <el-tabs :key="item.key" :type = "item.options.tabType" :stretch = "item.options.stretch">
            <el-tab-pane v-for="(tabItem, tabIndex) in item.tabList" :key="tabIndex" :label="tabItem.label">
              <template v-for="el in tabItem.list">
                <!-- 为栅格布局时 -->
                <template v-if = "el.type == 'grid' && (Object.keys(el.options).indexOf('isHidden') === -1 || !el.options.isHidden)">
                  <el-row :key="el.key" type="flex"
                  :gutter="el.options.gutter ? el.options.gutter : 0"
                  :justify="el.options.justify"
                  :align="el.options.align">
                    <el-col v-for = "(col, colIndex) in el.columns" :key = "colIndex" :span = "col.span"
                    :class = "(Object.keys(col).indexOf('isButtonGroup') !== -1 && col.isButtonGroup) ? 'el_col_buttonGroup' : ''">
                      <template v-for="citem in col.list" >
                        <Show-form-item :key="citem.key" :models.sync="models" :rules="rules" :widget="citem"></Show-form-item>
                      </template>
                    </el-col>
                  </el-row>
                </template>
                <!-- 其它组件 -->
                <template v-else>
                  <Show-form-item :key="el.key" :models.sync="models" :rules="rules" :widget="el"></Show-form-item>
                </template>
              </template>
            </el-tab-pane>
          </el-tabs>
        </template>
        <template v-else>
          <Show-form-item :key="item.key" :models.sync="models" :rules="rules" :widget="item"></Show-form-item>
        </template>
      </template>
    </el-form>
  </div>
</template>

<script>
import ShowFormItem from './ShowFormItem.vue'
import workflowShow from '@/views/workflow/workflowShow/WorkflowShow.vue'
// import {loadJs} from '../util/index.js'
export default {
  name: 'fm-generate-form',
  components: {
    ShowFormItem, workflowShow
  },
  props: ['data'],
  data () {
    return {
      models: {},
      rules: {},
      // 当为流程信息时
      currentShow: 'basicInfo',
      workflowBtnStatus: {
        Delete: [],
        Save: [],
        Submit: [],
        Pass: [],
        Reject: [],
        Stop: [],
        Apply: []
      }
    }
  },
  created () {
    this.generateModle(this.data.list)
    this.getWorkflowBtnStatus(this.data.pageConfig)
  },
  methods: {
    generateModle (genList) {
      for (let i = 0; i < genList.length; i++) {
        if (genList[i].type === 'grid') {
          genList[i].columns.forEach(item => {
            this.generateModle(item.list)
          })
        } else if (genList[i].type === 'tabs') {
          for (let t = 0; t < genList[i].tabList.length; t++) {
            this.generateModle(genList[i].tabList[t].list)
          }
        } else {
          // 将每一个的model属性当做唯一的标识---赋予初始值
          this.models[genList[i].model] = genList[i].options.defaultValue
          // 获取表单验证的规则
          if (this.rules[genList[i].model]) {
            this.rules[genList[i].model] = [...this.rules[genList[i].model], ...genList[i].rules.map(item => {
              if (item.pattern) {
                return {...item, pattern: item.pattern}
              } else {
                return {...item}
              }
            })]
          } else {
            this.rules[genList[i].model] = [...genList[i].rules.map(item => {
              if (item.pattern) {
                return {...item, pattern: item.pattern}
              } else {
                return {...item}
              }
            })]
          }
        }
      }
    },
    getData () {
      return new Promise((resolve, reject) => {
        this.$refs.generateForm.validate(valid => {
          if (valid) {
            resolve(this.models)
          } else {
            reject(new Error('表单数据校验失败').message)
          }
        })
      })
    },
    // 获取流程表单的按钮显示状态和按钮事件
    getWorkflowBtnStatus (pageworkflowConfig) {
      if (pageworkflowConfig.hadWorkflow && pageworkflowConfig.workflowBtnEvents.length) {
        pageworkflowConfig.workflowBtnEvents.forEach(item => {
          let obj = {
            sortNum: item.actionIndex,
            eventsNo: item.eventsNo,
            eventType: item.btnType,
            btnName: item.btnName,
            inputDic: item.inputDic,
            outputDic: item.outputDic
          }
          if (item.btnType === 'Save_add' || item.btnType === 'Save_edit') {
            this.workflowBtnStatus['Save'].push(obj)
          } else if (item.btnType === 'Reject' || item.btnType === 'SelectReject') {
            this.workflowBtnStatus['Reject'].push(obj)
          } else {
            this.workflowBtnStatus[item.btnType].push(obj)
          }
        })
      } else {
        this.workflowBtnStatus = {
          Delete: [],
          Save: [],
          Submit: [],
          Pass: [],
          Reject: [],
          Stop: [],
          Apply: []
        }
      }
    }
  },
  watch: {
    data: {
      deep: true,
      handler (val) {
        this.generateModle(val.list)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.show_content{
  max-height: 600px;
  overflow-y: auto;
  overflow-x: hidden;
}
@media(max-width: 1367px) {
 .show_content{
    max-height: 400px;
  }
}
</style>
